<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="childOperation">
      <!-- 内容主体区域 -->
      <el-form :model="addForm" ref="addFormRef" label-width="70px">
        <el-form-item label="角色名称">
          <el-input v-model="addForm.roleName" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="addForm.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="childOperation">取 消</el-button>
        <el-button type="primary" @click="addOperation(addForm,id.id)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      addForm: {
        roleName: '',
        roleDesc: '',
      },
    };
  },
  props: ["showDig","id"],
  watch: {
    showDig: function (newval, oldval) {
        console.log(this.id)
      this.dialogVisible = newval;
    },
      id: function (newval, oldval) {
        this.addForm.roleName= newval.roleName,
        this.addForm.roleDesc= newval.roleDesc
    }
  },
  methods: {
    childOperation() {
      this.$refs.addFormRef.resetFields();
      this.$emit("aaa");
    },

    addOperation(addForm,id) {
      this.$axios.put(`roles/${id}`,addForm).then((res) => {
          if(res.data.meta.status!==200){
              return this.$message.error('角色创建失败')
          };
          this.$message({
              message:res.data.meta.msg,
              type:'success'
          });
          //通知父组件刷新
          this.$emit('update')
           this.dialogVisible=false;
        console.log(res);
      });
    },
  },
};
</script>
<style lang='scss' scoped>
</style>